<template>
  <div>
    <template v-for="item in search" :key="item.key">
      <el-form-item
        :prop="item.key"
        :label="isLabel ? item.label : ''"
        :rules="
          item.rules
            ? findConfig(item.rules, formConfig)
            : [
                {
                  required: findConfig(item.required, formConfig),
                  message:
                    item.m ||
                    item.message ||
                    `${rulesMessage[item.type]}${item.label}`,
                },
              ]
        "
      >
        <div class="demo-form-inline">
          <!-- 自定义插槽 -->
          <slot
            v-if="item.slotName"
            v-bind="item || {}"
            :name="item.slotName"
          />
          <!-- 框架 -->
          <Frames
            v-else
            v-bind="props"
            :data="item"
            @changeValue="(data) => emit('changeValue', data)"
          />
        </div>
      </el-form-item>
    </template>
    <el-form-item v-if="inline">
      <el-button type="primary" @click="emit('query')">查询</el-button>
      <el-button @click="emit('reset')">重置</el-button>
    </el-form-item>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { propsConfig, findConfig, rulesMessage } from "./utils/index.js";
import Frames from "./utils/index.vue";

const emit = defineEmits(["changeValue", "query", "reset"]);
const props = defineProps({
  // 是否内联
  inline: { type: Boolean, default: true },
  // 是否需要label
  isLabel: { type: Boolean, default: true },
  search: { type: Array, default: () => [] },
  ...propsConfig,
});

// 动态计算查询和重置按钮的 span
const gapSpan = computed(() => {
  const { form } = props;
  const length = form.length;
  if (length % 4 === 0) {
    return 24;
  } else if (length % 4 === 1) {
    return 18;
  } else if (length % 4 === 2) {
    return 12;
  } else if (length % 4 === 3) {
    return 6;
  }
});
</script>

<style lang="scss" scoped>
:deep(.demo-form-inline) {
  width: 100%;
  .el-input,
  .el-select,
  .el-textarea {
    width: 220px !important;
  }
}
</style>